<template>
    <div>
        <el-dialog title="选择主播"
            :append-to-body="true"
            @close="closeDio"
            :visible.sync="dialogTableVisible"
            width="800px"
            style="padding:20px">
            <el-table v-if="data_list.data"
                ref="multipleTable"
                :data="data_list.data"
                stripe
                header-row-class-name="head_color"
                tooltip-effect="dark"
                v-loading="loading"
                style="width: 100%">
                <el-table-column label="图片"
                    min-width="120">
                    <template slot-scope="scope">
                        <img :src="$fnc.getImgUrl(scope.row.piclink)"
                            alt
                            style="width:70%;border-radius:5px" />
                    </template>
                </el-table-column>
                <el-table-column label="标题"
                    min-width="200">
                    <template slot-scope="scope">{{ scope.row.title }}</template>
                </el-table-column>
                <el-table-column label="价格"
                    min-width="200">
                    <template slot-scope="scope">{{ scope.row.price }}</template>
                </el-table-column>
                <el-table-column label="操作"
                    min-width="150">
                    <template slot-scope="scope">
                        <el-button :loading="$store.state.isLoading"
                            size="mini"
                            @click="addShops(scope.row)">添加</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row>
                <el-col :span="24"
                    class="table_bottom">
                    <el-col :span="24"
                        class="tr">
                        <el-pagination @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage1"
                            :page-sizes="[5, 10, 15, 20]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="data_list.all_num"></el-pagination>
                    </el-col>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: "xz_lesson",
    props: {
        show: {
            type: Boolean,
            default: false
        },
        showType: {
            type: String,
            default: "table"
        }
    },
    data () {
        return {
            data_list: [],
            currentPage1: 1,
            pageSize: 5,
            dialogTableVisible: this.show,
            loading: false
        };
    },
    created () { },
    methods: {
        get_data_list (page, page_size) {
            this.loading = true;
            var params = {};
            params.page = page;
            params.page_size = page_size;
            this.$api.getPage.get_live_recommend(params).then(res => {
                if (res.data.code == 200) {
                    this.data_list = res.data.result;
                    this.loading = false;
                } else {
                    this.$fnc.alertError(res.data.result);
                    this.loading = false;
                }
            });
        },
        addShops (row) {
            this.$emit("sendShop", row);
            this.dialogTableVisible = false;
        },
        handleSizeChange (val) {
            this.get_data_list("", val);
            this.pageSize = val;
        },
        handleCurrentChange (val) {
            
            this.get_data_list(val, this.pageSize);
        },
        closeDio () {
            this.$emit("isshow", false);
            this.dialogTableVisible = false;
        }
    },
    watch: {
        show (val1, val2) {
            if (val1) {
                this.get_data_list(1, this.pageSize);
            }
            console.log(val1);
            if (val1 == val2) {
                return;
            }
            this.dialogTableVisible = val1;
        }
    },
    computed: {}
};
</script>
<style lang="less" scoped>
.list_ul {
    height: 610px;
    overflow: auto;
}
.list_card {
    padding: 15px;
    cursor: pointer;
}
.card_list {
    line-height: 2;
    padding: 5px 0 0 5px;
}
.price_card {
    color: red;
}
</style>
